$(function() {
    var rotate = function(element, options) {
        var data = options.data;
        console.log(data);
        // var jRotate = $(this);
        this.el = element;
        // this.size = data.length;
        this.index = 0;
        this.el.addClass("rotate");
        for (var i = 0; i < data.length; i++) {
            var htmlString = '<li><img src="imgs/' + data[i].content + '.jpg"></li>';
            var jStep = $(htmlString);
            // console.log(data[i]);
            this.el.append(jStep);
        }
    }
    rotate.prototype.btnLeft = function() {
        if (num > -1200) {
            num = num - 300;
            var nums = num + "px";
        } else if (num == -1200) {
            num = 0;
            var nums = num + "px";
        }
        console.log(nums);
        rotate.css("left", nums);
    }
    rotate.prototype.btnRight = function() {
        if (num < 0) {
            num = num + 300;
            var nums = num + "px";

        } else if (num == 0) {
            num = -1200;
            var nums = num + "px";
        }
        console.log(nums);
        rotate.css("left", nums);

    }

    var plugin = function(option) {
        return this.each(function() {
            var jThis = $(this);
            console.log(data);
            console.log(this);
            var data = jThis.data("rotate");
            if (!data) {
                jThis.data("rotate", new rotate(jThis, option));
            }
            if (typeof option == "string") {
                data[option].call(data);
            }
        });
    };
    $.fn.rotate = plugin;
    // -----------------------------------------------
    var rotate = $("#rotate").rotate({
        data: [{
            content: 1
        }, {
            content: 2
        }, {
            content: 3
        }, {
            content: 4
        }, {
            content: 5
        }]
    })
    var rotate = $(".rotate");
    var btnLeft = $(".btn-left");
    var btnRight = $(".btn-right");
    var num = 0;
    btnLeft.on("click", function(e) {
        rotate.rotate("btnLeft");
    })
    btnRight.on("click", function(e) {
        rotate.rotate("btnRight");
    })
})